import React, { use } from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  Redirect,
  generatePath,
  useHistory,
} from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
import Users from "./components/Users";
import Father from "./components/二级路由/Father";
import { NavLink } from "react-router-dom/cjs/react-router-dom.min";
function App() {
  const history = useHistory();
  const generatePathFn = function () {
    // 根据路由模板 + 参数，生成一个真正的 URL 字符串。
    const zks = generatePath("/zks/:id/:entity(posts|comments)", {
      id: 1,
      entity: "posts",
    });
    console.log(zks);
    history.push(zks);
  };
  return (
    <div>
      <button onClick={generatePathFn}>生成路由</button>

      <div>
        <Link to="/">Home</Link>
      </div>
      <div>
        <Link to="/about">About</Link>
      </div>
      <div>
        {/* 一种特殊的<Link>版本，当匹配当前URL时，会在渲染元素上添加样式属性。 */}
        <NavLink
          activeStyle={{
            fontWeight: "bold",
            color: "red",
            fontSize: "120px",
          }}
          to="/users"
        >
          Users
        </NavLink>
      </div>
      <div>
        <Link to="/father">二级路由</Link>
      </div>

      {/* switch用于只展示第一个匹配到的组件 */}
      <Switch>
        <Route path="/about" component={About} />
        <Route path="/users">
          <Users />
        </Route>

        <Route path="/father">
          <Father />
        </Route>
        {/* exact精确匹配 */}
        <Route path="/" exact>
          <Home />
        </Route>

        <Route path="/zks/:id/:uname">
          <div>我是zjs</div>
        </Route>
        {/* react路由由上往下匹配 匹配不到时 会自动重定向 */}
        <Redirect to="/users"></Redirect>
        {/* 匹配所有路由 */}
        {/* <Route path="*">
          <div>404</div>
        </Route> */}
      </Switch>
    </div>
  );
}

export default App;
